<template>
	<view class="deviceStateSelect">
		<!-- 设备状态筛选 -->
		<transition>
			<view class="box" v-if="isShow">
				<view class="header">
					<view class="title-left" @click="reset"> 重置 </view>
					<view class="title"> 筛选 </view>
					<view class="title-right" @click="confirm"> 确认 </view>
				</view>
				<view class="state" v-if="isShowDevice">
					<view class="state-title">设备状态</view>
					<view class="item">
						<view v-for="(item,index) in deviceStateList" :key="item.id" class="tag" :class="{ active:currentIndex1 === index}"
						@click="getDeviceStateItem(item,index)"> {{ item.name }} </view>
					</view>
				</view>
				<view class="state mt60">
					<view class="state-title">资产归属</view>
					<view class="item">
						<view class="tag" v-for="(item,index) in assetOwnershipList" :key="item.id" :class="{ active: currentIndex2 === index }"
						@click="getAssetOwnershipItem(item,index)"> {{ item.name }} </view>
					</view>
				</view>
			</view>
		</transition>
		<u-overlay :show="isShow" :opacity="0.5"></u-overlay>
	</view>
</template>

<script>
	export default {
		props:{
			isShow:{
				type: Boolean,
				default: false,
			},
			isShowDevice:{
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				currentIndex1: 0,
				currentIndex2: 0,
				deviceStateId: "",
				assetOwnership: "",
				deviceStateList:[  // 0:正常,1:使用中,2:维修中,3:维养中
					{id: '全部', name: "全部"},
					{id: 0, name: "正常"},
					{id: 1, name: "使用中"},
					{id: 2, name: "维修中"},
					{id: 3, name: "维养中"}
				],
				assetOwnershipList: [
					{
						id: '全部',
						name: "全部"
					},
					{
						code: "zyzc",
						id: 111,
						name: "自有资产"
					},
					{
						code: "zpzc",
						id: 112,
						name: "租赁资产"
					},
				],
			}
		},
		methods:{
			// 点击设备状态一行
			getDeviceStateItem(item,index){
				this.currentIndex1 = index
				if(item.name === "全部"){
					this.deviceStateId = ""
				}else{
					this.deviceStateId = item.id
				}
				console.log(item, index, this.deviceStateId)
			},
			
			// 点击资产归属一行
			getAssetOwnershipItem(item,index){
				this.currentIndex2 = index
				if(item.name === "全部"){
					this.assetOwnership = ""
				}else{
					this.assetOwnership = item.name
				}
			},
			
			// 重置
			reset(){
				this.currentIndex1 = 0
				this.currentIndex2 = 0
				this.deviceStateId = ""
				this.assetOwnership = ""
				this.$emit("reset")
			},
			
			// 确定
			confirm(){
				this.$emit("confirm", this.deviceStateId, this.assetOwnership)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deviceStateSelect{
		.box{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 99999;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			.header{
				display: flex;
				justify-content: space-between;
				line-height: 80rpx;
				height: 80rpx;
				color: #445469;
				.title-left{
					font-size: 32rpx;
				}
				.title{
					font-weight: 600;
				}
				.title-right{
					color: #2F80ED;
				}
			}
			
			.state{
				.state-title{
					color: #627895;
					margin-top: 30rpx;
				}
				.item{
					display: flex;
					flex-wrap: wrap;
					.tag{
						height: 60rpx;
						line-height: 60rpx;
						color: #50719D;
						background-color: #F5F7FA;
						margin-right: 20rpx;
						margin-top: 30rpx;
						border-radius: 60rpx;
						font-size: 28rpx;
						padding: 0rpx 25rpx;
					}
					.tag:last-child{
						margin-right: 0rpx;
					}
					.active{
						background-color: #2F80ED;
						color: #FFFFFF;
					}
				}
				
			}
			.mt60{
				margin-bottom: 60rpx;
			}
		}
		
	}
	// 进入前和结束后的状态
	.v-enter,.v-leave-to{
		opacity: 0;
		transform: translateY(150px);
	}
	// 进入和离开的动画时间段
	.v-enter-active,.v-leave-active{
		transition: all 0.3s ease
	}
	</style>
</style>
